<template>
  <!-- <div class="todo-input">
    <input type="text" placeholder="请输入新的待办事项" v-model.trim="inputValue" ref="inputRef" @keydown.enter="handleAdd">
    <button @click='handleAdd'>添加</button>
  </div> -->
  <div class="field has-addons" :style="{ justifyContent: 'center', marginTop:'20px'}">
  <div class="control">
    <input class="input" type="text" placeholder="请输入新的待办事项" v-model.trim="inputValue" ref="inputRef" @keydown.enter="handleAdd">
  </div>
  <div class="control">
    <a class="button is-primary" @click.prevent='handleAdd'>
      Add
    </a>
  </div>
</div>
</template>

<script>
export default {
  name: 'TodoInput',
  data: function () {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleAdd () {
      // 使用原生js自动获得焦点
      // document.querySelector('input').focus()
      // 使用$refs方法获得焦点
      this.$refs.inputRef.focus()
      // 输入框为空时不添加
      if (!this.inputValue) {
        return
      }
      // console.log('添加', this.inputValue)
      // 触发父组件的add事件，向父组件传递数据
      // this.$emit('add', this.inputValue)
      this.$bus.$emit('add', this.inputValue)
      // 清空输入框
      this.inputValue = ''
    }
  }
}
</script>

<style lang="scss">

</style>
